<template>
  <div class="hhh">
  <div class="img_list" v-for="(item,index) in imgList" :key="index">
    <img :src="item.url" width="100px" />
    <div class="img_span">
      <span>{{item.id}}</span>
  </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "ImgLoder",
  data(){
    return{
      imgList:[
        {
          id: "帽子",
          url: require('@/img/1.jpg')
        },
        {
          id: "水果",
          url: require('@/img/2.jpg')
        },
        {
          id: "水果",
          url: require('@/img/3.jpg')
        },
        {
          id: "面包",
          url: require('@/img/4.jpg')
        },
        {
          id: "服饰",
          url: require('@/img/5.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/6.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/7.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/8.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/9.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/10.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/11.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/12.jpg')
        },
        {
          id: "汽车",
          url: require('@/img/13.jpg')
        }
]
    }
  }
}
</script>

<style scoped>
.hhh{
  width: 8rem;
  height: 14rem;
  overflow:  scroll;
}
.img_list{
  display: inline-block;
  margin: 0 0.3rem 0 0.4rem;
}
.img_span{
  margin-left: 45px;
}
</style>
